{"componentChunkName":"component---src-templates-post-js","path":"/blog/react-usememo","result":{"data":{"markdownRemark":{"html":"

\n\n \n \n \n \n

\n

Intro

\n

In this post we’re going to learn about what useMemo hook is and when should we use it in our application. Then we learn how to implement it and make sure it improves our app’s performance instead of making it worse.

\n

Concept

\n

In react, everything is based on state changes. Every state change inside a react component makes it re-render itself, which means invoking every variable or function declaration inside the component. Now imagine a performance heavy function that gets computed in every render and each time returns the same value. Until one of the props in that function changes, it will return the same result on each render and cause performance reduction in your app. useMemo is a react hook that enables you to memoize a function. It means that your function runs on the component initialization and the returned value will be stored so when the component state changes and DOM gets re-rendered, it can use the stored value instead of computing the function.

\n

Implementation

\n

The useMemo hook accepts a function and an array of dependency and returns a memoized value.

\n
\n

useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

\n
\n

For better understanding, imagine a user list component with more than ten thousand entries (although this should never happen in real world projects) which returns a table of all the entries (users) and provides a gender based filter. Every time we switch gender, the table would re-render.

\n
App.js
\n
import \"./styles.scss\";\nimport UserList from \"./components/user-list\";\nexport default function App() {\n  return (\n    <div className=\"main-container\">\n      <UserList />    </div>\n  );\n}
\n
user-list.js
\n
import React, { useState } from \"react\";\nimport { userData } from \"../json-data/data\";\n\nconst UserList = () => {\n  \n  const [gender, setGender] = useState(\"male\");\n\n  const userDataFiltered = (\n    <>\n      {userData\n        .filter((item) => item.gender === gender)\n        .map((item) => (\n          <tr>\n            <td>{item.index + 1}</td>\n            <td>{item.name}</td>\n            <td>{item.gender}</td>\n            <td>{item.company}</td>\n            <td>{item.isActive ? \"yes\" : \"no\"}</td>\n          </tr>\n        ))}\n    </>\n  );\n\n  return (\n    <div className=\"list-container\">\n      <div className=\"filter-container\">\n        <div className=\"gender-toggle\">\n          <span>Male</span>\n          <input\n            type=\"checkbox\"\n            id=\"switch\"\n            onChange={() => {\n              setGender(gender == \"male\" ? \"female\" : \"male\");\n            }}\n            checked={gender == \"male\" ? true : false}\n          />\n          <label for=\"switch\">gender</label>\n          <span>Female</span>\n        </div>\n      </div>\n      <table class=\"rwd-table\">\n        <tr>\n          <th>index</th>\n          <th>Name</th>\n          <th>Gender</th>\n          <th>Company</th>\n          <th>Active</th>\n        </tr>\n        {userDataFiltered}\n      </table>\n    </div>\n  );\n};\n\nexport default UserList;
\n

The userData provided to the component is an array of objects:

\n
data.js
\n
export const userData = [\n  {\n      \"_id\": \"6137b0fd82ad3eca732c7e4b\",\n      \"index\": 0,\n      \"guid\": \"730d565c-20d7-49e9-80f3-8b1e8e0f0eff\",\n      \"isActive\": true,\n      \"balance\": \"$1,889.25\",\n      \"name\": \"Mendez Arnold\",\n      \"gender\": \"male\",\n      \"company\": \"HATOLOGY\"\n},\n...\n]
\n

Now we add another state to this component, for example the value of a controlled input called tableName:

\n
user-list.js
\n
import React, { useState } from \"react\";\nimport { userData } from \"../json-data/data\";\n\nconst UserList = () => {\n  \n  const [gender, setGender] = useState(\"male\");  const [tableName, setTableName] = useState(null);\n\n  const userDataFiltered = (\n    <>\n      {userData\n        .filter((item) => item.gender === gender)\n        .map((item) => (\n          <tr>\n            <td>{item.index + 1}</td>\n            <td>{item.name}</td>\n            <td>{item.gender}</td>\n            <td>{item.company}</td>\n            <td>{item.isActive ? \"yes\" : \"no\"}</td>\n          </tr>\n        ))}\n    </>\n  );\n\n  return (\n    <div className=\"list-container\">\n      <div className=\"filter-container\">\n        <div className=\"table-name\">          <input            value={tableName}            onChange={(e) => setTableName(e.target.value)}            placeholder=\"Type a name for this list...\"          />        </div>        <div className=\"gender-toggle\">\n          <span>Male</span>\n          <input\n            type=\"checkbox\"\n            id=\"switch\"\n            onChange={() => {\n              setGender(gender == \"male\" ? \"female\" : \"male\");\n            }}\n            checked={gender == \"male\" ? true : false}\n          />\n          <label for=\"switch\">gender</label>\n          <span>Female</span>\n        </div>\n      </div>\n      <table class=\"rwd-table\">\n        <tr>\n          <th>index</th>\n          <th>Name</th>\n          <th>Gender</th>\n          <th>Company</th>\n          <th>Active</th>\n        </tr>\n        {userDataFiltered}\n      </table>\n    </div>\n  );\n};\n\nexport default UserList;
\n

Notice that when we change the value of tableName, it takes a few seconds for the input to update. This is because when the tableName state changes, react has to re-render the component, this means our table with more than ten thousand entries should get filtered based on gender and returned every time we press a key.

\n

Now what if there was a way to change tableName without filtering and rendering the table? To achieve this functionality we need to memoize our table so only when we call setGender the process of filtering and rendering happens.

\n

We have to do some changes in user-list.js:

\n
user-list.js
\n
import React, { useMemo, useState } from \"react\";import { userData } from \"../json-data/data\";\n\nconst UserList = () => {\n  \n  const [gender, setGender] = useState(\"male\");\n  const [tableName, setTableName] = useState(null);\n\n  const userDataFiltered = useMemo(() => {    return (      <>\n        {userData\n          .filter((item) => item.gender === gender)\n          .map((item) => (\n            <tr>\n              <td>{item.index + 1}</td>\n              <td>{item.name}</td>\n              <td>{item.gender}</td>\n              <td>{item.company}</td>\n              <td>{item.isActive ? \"yes\" : \"no\"}</td>\n            </tr>\n          ))}\n      </>\n    );\n  }, [gender]);\n\n  return (\n    <div className=\"list-container\">\n      <div className=\"filter-container\">\n        <div className=\"table-name\">\n          <input\n            value={tableName}\n            onChange={(e) => setTableName(e.target.value)}\n            placeholder=\"Type a name for this list...\"\n          />\n        </div>\n        <div className=\"gender-toggle\">\n          <span>Male</span>\n          <input\n            type=\"checkbox\"\n            id=\"switch\"\n            onChange={() => {\n              setGender(gender == \"male\" ? \"female\" : \"male\");\n            }}\n            checked={gender == \"male\" ? true : false}\n          />\n          <label for=\"switch\">gender</label>\n          <span>Female</span>\n        </div>\n      </div>\n      <table class=\"rwd-table\">\n        <tr>\n          <th>index</th>\n          <th>Name</th>\n          <th>Gender</th>\n          <th>Company</th>\n          <th>Active</th>\n        </tr>\n        {userDataFiltered}\n      </table>\n    </div>\n  );\n};\n\nexport default UserList;
\n

You can see that without any effort, the userDataFiltered is memoized and won't be invoked until its dependency array items (gender) change. Now if we change the value of our input, a huge performance increase can be noticed as it updates instantly.

\n

Conclusion

\n

See the example in codesandbox

\n

References

","frontmatter":{"title":"Beginners guide to useMemo","description":"In this post we’re going to learn about what `useMemo` hook is and when should we use it in our application.","date":"2021-08-29","slug":"/blog/react-usememo","tags":["React","Hooks","useMemo"]}}},"pageContext":{}}}